
import React, { useState, useEffect } from 'react'
import { Button, Checkbox, Col, InputNumber, Layout, Row, Select, Tooltip, Spin } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { imgUrl } from '@/config/envconfig'
import ReactEcharts from 'echarts-for-react';
import HeaderBox from '@/components/header'
import FooterBox from '@/components/footer'
import btcIcon from '../../assets/img/icon/btc.png'
import ethIcon from '../../assets/img/icon/eth.png'
import usdtIcon from '../../assets/img/icon/usdt.png'
import cardIcon from '../../assets/img/icon/card.png'
import aliIcon from '../../assets/img/icon/alipay.png'
import Funs from '@/utils/Funs'
import API from '@/api/api'
import './index.scss'
const { Content } = Layout
const { Option } = Select

function PowerDetail(props) {
    const [load, setLoad] = useState(true)
    const [payIndex, setPayIndex] = useState(0)
    const [payList, setPayList] = useState([])
    const [fee, setFee] = useState(0)
    const [feeIndex, setFeeIndex] = useState(0)
    const [feeList, setFeeList] = useState()
    const [detail, setDetail] = useState()
    const [num, setNum] = useState(0)
    const [feeBuy, setFeeBuy] = useState(false)
    const [isPhone, setIsPhone] = useState(false)
    useEffect(() => {
        if (Funs.getUrl('num')) {
            let num = Funs.getUrl('num')
            setNum(num)
        }
        isMobile()
        getGoodsDetail()
        getPayList()
        getGoods()
    }, [])

    const isMobile = () => {
        if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
            setIsPhone(true)
        } else {
            setIsPhone(false)
        }
        console.log(isPhone)
    }

    const getGoods = async () => {
        let res = await API.goodsList()
        if (res && res.data) {
            setFeeList(feeDeal(res.data))
        }
    }

    const getGoodsDetail = async () => {
        let id = props.match.params.id
        let opts = { goodsId: id }
        setLoad(true)
        let res = await API.goodsDetail(opts)
        if (res) {
            setDetail(res.data)
            setLoad(false)
        } else {
            setLoad(false)
        }
    }

    const getPayList = async () => {
        let res = await API.payList()
        if (res) {
            setPayList(payDeal(res.data))
        }
    }

    const payDeal = (data) => {
        if (data) {
            let tempArr = []
            data.map((v, i) => {
                if (v.is_mobile && isPhone) {
                    tempArr.push(v)
                } else if (v.is_pc && !isPhone) {
                    tempArr.push(v)
                }
                return v
            })
            return tempArr
        }
    }

    const feeDeal = (data) => {
        if (data) {
            let tempArrr = []
            data.map((v, i) => {
                if (!v.miner_daily_unit_managed_price) {
                    tempArrr.push(v)
                }
                return v

            })
            return tempArrr
        }
    }

    const selectPay = index => {
        setPayIndex(index)
    }

    const feeCheck = e => {
        setFeeBuy(e.target.checked)
    }

    const feeSelect = e => {
        setFeeIndex(e)
        setFee(feeList[e].price)
    }

    const payItem = (value, index) => {
        return (
            <div key={index} className={index === payIndex ? "pay-item-active" : "pay-item"} onClick={() => selectPay(index)}>
                <img className="pay-icon" src={imgUrl + value.image} />{value.name}
            </div>
        )
    }

    const moneyOption = {
        title: {
            text: "单位：USDT",
            left: 'center',
            bottom: 15,
            textStyle: {
                fontSize: 16,
                fontWeight: 500
            }
        },
        xAxis: {
            type: 'category',
        },
        yAxis: {
            type: 'value'
        },

        legend: {
            show: true,
            data: ['投入成本', '总电费', '静态总产出', '总管理费']
        },
        series: [
            {
                name: '投入成本',
                type: 'bar',
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#F8B657'
                    },
                },
                itemStyle: {
                    color: '#AEB0BC'
                },
                data: [detail && detail.chart.price.goodsCost]
            },
            {
                name: '总电费',
                type: 'bar',
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#F8B657'
                    },
                },
                itemStyle: {
                    color: '#F8B657'
                },
                data: [detail && detail.chart.price.powerCost]
            },
            {
                name: '静态总产出',
                type: 'bar',
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#F8B657'
                    },
                },
                itemStyle: {
                    color: '#3F90FA'
                },
                data: [detail && detail.chart.price.income]
            },
            {
                name: '总管理费',
                type: 'bar',
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#F8B657'
                    },
                },
                itemStyle: {
                    color: '#a67bf6'
                },
                data: [detail && detail.chart.price.managedCost]
            }
        ]
    };

    const dayOption = {
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
        },
        legend: {
            data: ['静态回本', '套餐周期']
        },
        series: [
            {
                name: '静态回本',
                type: 'bar',
                label: {
                    show: true,
                    position: 'inside',
                    textStyle: {
                        color: '#fff'
                    },
                },
                itemStyle: {
                    color: '#F8B657'
                },
                data: [detail && detail.chart.days.cycle]
            },
            {
                name: '套餐周期',
                type: 'bar',
                label: {
                    show: true,
                    position: 'inside',
                    textStyle: {
                        color: '#fff'
                    },
                },
                itemStyle: {
                    color: '#3F90FA'
                },
                data: [detail && detail.chart.days.recover]
            }
        ]
    };

    const createOrder = async () =>{
        
    }

    return (
        <Layout className="layout powerDetail">
            <HeaderBox />
            <Content>
                {load ? <div className="load-box"><Spin size="large" /></div> :
                    <div className="main" style={{ paddingTop: "96px" }}>
                        <div className="powerDetail-title">
                            <h3>订单信息</h3>
                        </div>
                        <section className="detail">
                            <Row className="detail-row">
                                <Col span={12}><p>套餐名称：</p><span>{detail.name}</span></Col>
                                <Col span={12}><p>套餐周期：</p><span>{detail.cycle_days} 天（{Funs.getDate(0)} - {Funs.getDate(detail.cycle_days)}）  </span></Col>
                            </Row>
                            <Row className="detail-row">
                                <Col span={12}><p>电费包：</p>
                                    <Checkbox value={feeBuy} onChange={feeCheck}>购买</Checkbox>
                                    <Select style={{ width: 200 }} onChange={feeSelect}>
                                        {
                                            feeList && feeList.map((value, index) => {
                                                return <Option key={index} value={index}>${value.total}(赠送 ${value.total - value.total_before})</Option>
                                            })
                                        }

                                    </Select>
                                    <Tooltip placement="right" title="电费包用于支付算力电费，如未购买将从每日收益中扣除电费">
                                        <QuestionCircleOutlined className="question-icon" />
                                    </Tooltip>
                                </Col>
                                <Col span={12} className="input-number"><p>算力：</p>
                                    <InputNumber value={num} style={{ width: 280 }} onChange={e => setNum(e)} />
                                    <span className="input-sub">{detail.unit}S</span>
                                </Col>
                            </Row>
                            <Row className="detail-row">
                                <Col span={12}><p>每日电费：</p><span>${detail.miner_daily_unit_power_price * num} </span><a>（无电费包时从当日收益扣除）</a></Col>
                                <Col span={12}><p>管理费用：</p><span>$ {detail.miner_daily_unit_managed_price.total}  </span></Col>
                            </Row>
                            <Row className="detail-row">
                                <Col><p>支付方式：</p>
                                    {
                                        payList.map((value, index) => {
                                            return payItem(value, index)
                                        })
                                    }
                                </Col>
                            </Row>
                            <Row className="detail-row">
                                <Col span={12}><p>总计：</p>
                                    <big>
                                        $ {feeBuy
                                            ? num * Number(detail.miner_daily_unit_power_price) + Number(fee)
                                            : num * Number(detail.miner_daily_unit_power_price)}
                                        {feeBuy ? `（含电费包￥${fee}）` : null}
                                    </big>
                                </Col>
                                <Col span={12}><p>交付日期：</p><span>{detail.delivery_days === 0 ? '立即交付' : detail.delivery_days + '天'} </span></Col>
                            </Row>
                            <Row className="detail-row">
                                <Col><p></p><Checkbox><span>我接受</span><a>《鲸矿用户服务协议》</a></Checkbox></Col>
                            </Row>
                            <Row className="detail-row">
                                <Button className="sure-btn" type="primary" onClick={createOrder}>确定</Button>
                            </Row>
                        </section>
                        <div className="powerDetail-title">
                            <h3>套餐详情</h3>
                        </div>
                        <div className="detail">
                            <Row className="detail-row">
                                <Col span={8}>套餐名称：{detail.name}</Col>
                                <Col span={8}>电费单价：{detail.miner_daily_unit_power_price} /{detail.unit}S/天 </Col>
                                <Col span={8}>交付日期：{detail.delivery_days === 0 ? '立即交付' : detail.delivery_days + '天'}</Col>
                            </Row>
                            <Row className="detail-row">
                                <Col span={8}>套餐周期：{detail.cycle_days}天</Col>
                                <Col span={8}>管理费用：$ {detail.miner_daily_unit_managed_price.total} </Col>
                                <Col span={8}>算力数量：{num} {detail.unit}S</Col>
                            </Row>
                        </div>
                        <div className="powerDetail-title">
                            <h3>收益分析</h3><span>（只供参考）</span>
                        </div>
                        <div className="detail">
                            <Row className="detail-box">
                                <Col className="detail-box-item" span={8}>
                                    <p className="title">总算力费</p>
                                    <p>$434.80</p>
                                </Col>
                                <Col className="detail-box-item" span={8}>
                                    <p className="title">每日电费</p>
                                    <p>$ </p>
                                </Col>
                                <Col className="detail-box-item" span={8}>
                                    <p className="title">每日静态产出</p>
                                    <p>$ {detail.chart.price.income}</p>
                                </Col>
                            </Row>
                            <Row className="detail-row" justify="space-between">
                                <div className="detail-chart">
                                    <p >静态收益<span>{detail.chart.price.incomeRate}%</span></p>
                                    <ReactEcharts option={moneyOption} />
                                </div>
                                <div className="detail-chart">
                                    <p>静态回本天数<span> {detail.chart.days.cycle}天</span></p>
                                    <ReactEcharts option={dayOption} />
                                </div>
                            </Row>
                            <div className="detail-fun">
                                <h3>相关计算方法：</h3>
                                <p>1、总算力费=投入成本=购买的总算力数量*该套餐的算力单价<br />
                                2、每日电费=该套餐的电费单价*购买的总算力数量<br />
                                3、总电费=每日电费*该套餐的周期天数<br />
                                4、静态分析是一种假定未来的各项数据静止不变的分析方法，即假定未来的法币价格、全网难度、区块奖励都静态不变的情况下计算收益率和回本天数等指标;<br />
                                5、静态回本天数=总算力费/（每日静态产出-每日电费-每日管理费）<br />
                                6、预计总收益=套餐周期*（每日静态产出-每日电费-每日管理费）<br />
                                7、静态收益率=（预计总收益/投入成本-1）*100%<br />
                                8、挖矿产出数据来源于BTC.com、sparkpool矿池等,仅供参考</p>
                            </div>
                        </div>
                        <div>
                        </div>
                        <div className="powerDetail-title">
                            <h3>注意事项</h3>
                        </div>
                        <div className="detail">
                            <h3>算力波动说明</h3>
                            <p className="detail-text">鲸矿提供的套餐对应的为真实算力，真实算力由于网络、矿机功率等不稳定因素会导致波动。</p>
                            <h3>结算方式</h3>
                            <p className="detail-text">
                                鲸矿采用FPPS方式为用户结算收益，减少因电力、网络波动、设备故障等原因导致的收益减少。<br />
                            每日的北京时间10：00结算前一日套餐收益。</p>
                            <h3>产品终止</h3>
                            <p className="detail-text">
                                固定周期的云算力业务，到期即服务终止，若当日挖矿收益不足以抵扣维护费，则当日收益为0。<br />
                            不可抗原因与意外事故：不能预见、不能避免或不能克服的客观事件，政府行为和    政府指令，电网供电事故，包括自然灾害如洪水、火山爆发、地震、山崩、火灾、风暴和恶劣气候等，<br />
                            以及社会异常事件如战争、罢工、动乱等。可能导致套餐终止，平台不承担任何责任。
                        </p>
                            <h3>风险提示 </h3>
                            <p className="detail-text">
                                丰水期套餐可能存在因雨量低、山洪、泥石流等特殊情况导致的电力断供，丰水期套餐停电无法补偿挖矿时长。<br />
                            按照协议规定，一旦订单已付款，将不支持退款。<br />
                            数字资产价格波动幅度较大，另每个币种的挖矿难度与区块奖励会定时调整。币价下跌或难度上涨，都会导致每份矿机挖矿套餐的收益降低。不管是从数字资产还是法币角度，本服务不<br />
                            保证用户能够回本。用户需要仔细评估自己的风险承受能力，在可接受的风控范围内投资数字资产挖矿。<br />
                            电力成本、管理费用可能由于国家政策、矿场实际情况及电力成本的变化而波动，平台将保留调整电费、管理费等费用的权利。<br />
                            矿机算力套餐的定价会根据数字货币价格等多因素调整。实际购买价格以用户付款时为准，后续即使价格发生变化，鲸矿也不会对这个订单进行差价补偿。
                        </p>
                        </div>
                    </div>
                }
            </Content>
            <FooterBox />
        </Layout>
    )
}

export default PowerDetail